<template>
  <div>
<h1>计算属性</h1>
<input type="text" v-model="user.firstName" /><br />
    <input type="text" v-model="user.lastName" /><br />
    <input type="text" v-model="fullName1" /><br />
    <input type="text" v-model="fullName2" /><br />
    <input type="text" v-model="fullName3" /><br />
  </div>
</template>

<script lang="ts">
import { defineComponent ,reactive ,computed,ref,watch,  watchEffect} from 'vue'

export default defineComponent({
  setup () {
    const user=reactive({
      firstName:'yyyy',
      lastName:'nnnn',
      child: {
        firstName: "ysx",
        lastName: "mjl",
      },
    })
    const fullName1 = computed(() => {
      return user.firstName + "-" + user.lastName;
    });
    console.log(fullName1);
    const fullName2 = computed({
      get() {
        return user.firstName + "-" + user.lastName;
      },
      set(value: string) {

        console.log(value);
        const arr = value.split("-");
        user.firstName = arr[0];
        user.lastName = arr[1];
      },
    });
    const fullName3 = ref("");
    watch(
      user,
      () => {
        fullName3.value = user.firstName + "-" + user.child.lastName;
      },
      {
        deep: true, //深度监视
        immediate: true, //立即触发
      }
    );
    watch(fullName3, (newValue: string, oldValue) => {
      console.log(newValue);
      console.log(oldValue);
      let arr = newValue.split("-");
      user.firstName = arr[0];
      user.child.lastName = arr[1];
    });
    // watch(
    //   [fullName3, () => user.firstName, () => user.lastName],
    //   (values, oldVaules) => {
    //     console.log(values);
    //     console.log(oldVaules);
    //     if (values[1] != oldVaules[1] || values[2] != oldVaules[2]) {
    //       fullName3.value = values[1] + "-" + values[2];
    //     } else if (values[0] != oldVaules[1]) {
    //       let arr = values[0].split("-");
    //       user.firstName = arr[0];
    //       user.lastName = arr[1];
    const fullName4 = ref("");
    watchEffect(() => {
      fullName4.value = user.firstName + "-" + user.lastName;
    });
    return {
      user,
      fullName1,
      fullName2,
      fullName3
    
    }
  }
})
</script>

<style scoped>

</style>
